<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>example methods demo</title>
  <script src="../assets/js/vue.js"></script>
</head>

<body>
  <h1>example methods demo</h1>
  <hr>
  <div id="app"></div>
  <p>
    <button onclick="destroy()">卸载</button>
  </p>
  <p>
    <button onclick="reload()">刷新</button>
  </p>
  <p>
    <button onclick="tick()">更改数据</button>
  </p>
  <script type="text/javascript">
    var sunday = Vue.extend({
      template: `<p>{{message}}</p>`,
      data: function () {
        return {
          message: 'hello,I am Sunday'
        }
      },
      mounted: function () {
        console.log("mounted被创建");
      },
      destroyed: function () {
        console.log("destroy 销毁之后");
      },
      updated: function () {
        console.log("updated 更新之后");
      }
    })

    var vm = new sunday().$mount("#app");

    function destroy() {
      vm.$destroy();
    }
    function reload() {
      vm.$forceUpdate()
    }

    function tick() {
      vm.message = "update message info ";
      vm.$nextTick(function () {
        console.log('message更新完后我被调用了');
      })
    }
  </script>
</body>

</html>